<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>H5拖拽</title>
  <style>
    .parent {
      width: 800px;
      height: 300px;
      border: 1px solid teal;
    }

    .child {
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      margin: 10px;
      float: left;
      border: 1px solid orange;
    }
  </style>
</head>

<body>
  <div class="parent"></div>
  <div id="one" class="child" draggable="true">1</div>
  <div id="two" class="child" draggable="true">2</div>
  <div id="three" class="child" draggable="true">3</div>
  <div id="four" class="child" draggable="true">4</div>
  <div id="five" class="child" draggable="true">5</div>
  <script>
    // 1.获取目标元素
    var parent = document.querySelector('.parent');
    var children = document.querySelectorAll('.child');
    var arrChild = Array.from(children)
    arrChild.forEach(function (item) {
      // 拖拽事件绑定
      item.ondragstart = function (e) {
        // console.log('拖拽开始');
        // console.log(e.target.id);
        e.dataTransfer.setData('id', e.target.id)
      }
      item.ondrag = function () {
        // console.log('拖拽进行中');
      }
      item.ondragend = function () {
        // console.log('拖拽结束');
      }
    })
    // 子元素进去父元素事件绑定
    parent.ondragenter = function () {
      console.log('子元素进入父元素');
    }
    parent.ondragover = function (e) {
      // 阻止事件默认行为
      e.preventDefault()
      console.log('子元素在父元素中移动');
    }
    parent.ondrop = function (e) {
      var id = e.dataTransfer.getData('id')
      // console.log(id);
      var dom = document.querySelector('#' + id);
      // 将拖拽元素放置到parent里面
      parent.appendChild(dom)
      console.log('子元素放下');
    }
  </script>
</body>

</html>